import Consumption from "@/components/icons/Consumption.vue";

<script setup lang="ts">
import { ref } from 'vue';
import type {Consumption,PageConsumption,PageResp} from "@/type/consumption.ts";
import {getPageConsumptions } from "@/api/consumption";
import {onMounted, watchEffect} from "vue";
// 查询-下拉框+输入框数据
const input = ref('')
const select = ref('1')

// 分页-当前页码+一页多少条数据+总数据量
const currentPage = ref(1)
const pageSize = ref(6)
const total = ref(20)

// 表格数据
const parentBorder = ref(false)
const tableData = ref<Consumption[]>([
  {
    // 默认数据
    recordId: 1,
    memberId: 1,
    consumptionType: "123",
    amount: 100,
    consumptionDate: "weizhi",
    relatedId: 1
  }
])

// 分页查询消费记录
const getPageConsumption = async () => {
  const pageInfo:PageConsumption   = {
    recordId: select.value == '1' ? Number(input.value) : null,
    memberId: select.value == '2' ? Number(input.value) : null,
    consumptionType: select.value == '3' ? input.value : '',
    page: currentPage.value,
    pageSize: pageSize.value,
  }
  console.log(pageInfo)
  const result: PageResp = await getPageConsumptions(pageInfo)
  if (result.code == 1) {
    total.value = result.data.total
    tableData.value = result.data.records
  }
}

// 挂载时查询一次
onMounted(() => {
  console.log(currentPage.value, pageSize.value)
  getPageConsumption()
})

// 监控查询变量-有变则重新查询
watchEffect(() => {
  getPageConsumption()
})

</script>


<template>
  <div class="comsumption-container">
    <!--主要操作展示区-->
    <el-card>
      <div class="header-add-and-find">
        <!--右侧查询课程按钮-->
        <el-input
            v-model="input"
            class="input-with-select"
            clearable
            placeholder="（实时搜索）请输入"
            prefix-icon="Search"
            style="max-width: 600px"
        >
          <template #prepend>
            <!--todo 该查询条件-->
            <el-select v-model="select" placeholder="Select" style="width: 115px">
              <el-option label="消费id" value="1"/>
              <el-option label="用户id" value="2"/>
              <el-option label="消费类型" value="3"/>
            </el-select>
          </template>
        </el-input>
      </div>

      <div class="info-main">
        <el-table :border="parentBorder" :data="tableData" max-height="445" style="width: 100%" table-layout="fixed">
          <!--详细数据展开-->
          <el-table-column type="expand">
            <template #default="props">
              <div class="detail-info" style="display: flex; justify-content: center">
                <el-card
                    style="margin: 20px; width: 75%; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
                  <div style="display: flex;">
                    <!-- 左侧：图片 -->
                    <div
                        style="flex: 0 0 150px; display: flex; justify-content: center; align-items: center; padding: 20px;">
                      <el-image :src="props.row.image">
                        <template #error>
                          <div class="image-slot">
                            <el-icon>
                              <icon-picture/>
                            </el-icon>
                          </div>
                        </template>
                      </el-image>
                    </div>
                    <!-- 右侧：详细信息 -->
                    <div style="flex: 1; padding: 20px;">
                      <h2 style="margin: 0 0 10px; font-size: 24px; color: #333;">{{ props.row.courseName }}</h2>
                      <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                        <p style="margin: 0; font-size: 16px; color: #666;"><strong>消费记录ID:</strong> {{
                            props.row.recordId
                          }}
                        </p>
                        <p style="margin: 0; font-size: 16px; color: #666;"><strong>用户ID:</strong> {{
                            props.row.memberId
                          }}</p>
                        <p style="margin: 0; font-size: 16px; color: #666;"><strong>消费类型:</strong> {{
                            props.row.consumptionType
                          }}</p>
                        <p style="margin: 0; font-size: 16px; color: #666;"><strong>金额:</strong>
                          {{ props.row.amount }}</p>
                      </div>
                      <p style="margin: 10px 0 0; font-size: 16px; color: #666;"><strong>消费日期:</strong>
                        {{ props.row.consumptionDate }}</p>
                      <p style="margin: 10px 0 0; font-size: 16px; color: #666;"><strong>相关ID:</strong>
                        {{ props.row.relatedId }}</p>
                    </div>
                  </div>
                </el-card>
              </div>
            </template>
          </el-table-column>



          <!--表格展示-->
          <el-table-column align="center" label="消费记录ID" prop="recordId" width="100px"/>
          <el-table-column align="center" label="用户ID" prop="memberId" width="150px"/>
          <el-table-column align="center" label="消费类型" prop="consumptionType" width="150px"/>
          <el-table-column align="center" label="金额" prop="amount" width="150px"/>
          <el-table-column align="center" label="消费日期" prop="consumptionDate"/>
          <el-table-column align="center" label="相关ID" prop="relatedId"/>
        </el-table>

        <!--分页-->
        <div class="pagination-block">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :background="true"
              :page-sizes="[6, 8, 10, 12, 14]"
              :total="total"
              layout="prev, pager, next, jumper, ->,sizes, total"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>




<style scoped lang="scss">
</style>









































